/* eslint-disable react/jsx-no-duplicate-props */
import React, { Component } from 'react'
import { Form, Input, Button, Upload, Select } from 'antd';
import {  UploadOutlined } from '@ant-design/icons';
import { connect } from "react-redux";
import {ProFormRadio, ProFormText, ProFormUploadButton} from '@ant-design/pro-form';


const { Option } = Select;

class AddLabel extends Component {
    state = {
        // imageUrl: {},
        fileList: [],
        loading: false,
        parentCate:[],
        picData: '',
        cateType: [
            {
                id: 1,
                name: '生活服务'
            },
            {
                id: 2,
                name: '休闲娱乐'
            },
            {
                id: 3,
                name: '职业技能'
            },
        ]

    };



    componentDidMount() {

        this.props.parentTag();

        const {parentTagData} = this.props;

        const  parentCate =[{id:0,name:'一级分类'}]
        parentTagData.map(item=>{
            let obj ={}
            obj.id=item.id;
            obj.name=item.caption;
            parentCate.push(obj)
        })
        this.setState({parentCate})
    }

    onFinish = (values) => {
        const { type } = this.props

        if (type === '0') {
            if (values) {

                values.icon = this.props.imgData
                values.bgImg =  this.props.bg
                // const newValues = removeEmptyField(values)
                this.props.addCateTag(values).then(res => {
                    this.props.list({ page: 1, size: 10 })
                })
            }
            this.props.clear()
            this.props.handleCancel()
        }
        else if (type === '1') {
            //编辑接口

            if (values) {
                // var img = []
                // img.push(this.props.record.icon)

                // var icon = this.GetUrlRelativePath(this.props.record.icon)
            //    var icon = this.props.record.icon.replace('https://resource.quqdan.com/', '')

                // var newicon = icon.silce('28')
                //
                values.icon = this.props.imgData
                values.id = this.props.record.id
                values.bgImg =  this.props.bg
                // const newValues = removeEmptyField(values)
                this.props.updCateTag(values).then(res => {
                    this.props.list({ page: 1, size: 10, type: 'image' })
                })
            }
            this.props.clear()
            this.props.handleCancel()
        }

    };
    GetUrlRelativePath(url) {
        var arrUrl = url.split("//");

        var start = arrUrl[1].indexOf("/");
        var relUrl = arrUrl[1].substring(start + 1);//stop省略，截取从start开始到结尾的所有字符

        if (relUrl.indexOf("?") != -1) {
            relUrl = relUrl.split("?")[0];
        }
        return relUrl;
    }
    onFinishFailed = (errorInfo) => {

    };
    render() {
        const { record ,parent,bgImg} = this.props
        const { loading ,parentCate} = this.state
        console.log(parent)
       let close = record&& record.owner==='0'
        const {  fileList, cateType } = this.state;
        const propsFile = {
            listType: "picture",
          //  accept: ".png, .jpg, .jpeg",
            onRemove: file => {
                const index = fileList.indexOf(file);
                const newFileList = fileList.slice();
                newFileList.splice(index, 1);
                this.setState({ fileList: newFileList })
            },
            beforeUpload: file => {
                const r = new FileReader();
                r.readAsDataURL(file);
                r.onload = e => {
                    file.thumbUrl = e.target.result;
                    this.setState({ fileList: [...fileList, file],loading:true })
                    this.props.imgs({ file: file, type: 'image' }).then(r=>{
                        if (r.code ===200) {
                            this.setState({loading:false })
                        }
                    })
                    //
                    // this.setState({ picData: picData.data })
                };
                return false;
            },
            fileList
        };
        return (
            <div>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                    initialValues={{
                        orderNum: record ? record.orderNum : '',
                        caption: record ? record.caption : '',
                        icon: record ? record.icon : '',
                        remarks: record ? record.remarks : '',
                        owner:record?record.owner:'',
                        showIndex:record?record.showIndex:''
                    }}
                >
                    <Form.Item
                        label="排序"
                        name="orderNum"
                        rules={[{ required: true, message: '请输入排序序号!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="推荐展示"
                        name="showIndex"

                        rules={[{ required: true, message: '请输入!' }]}
                    >
                        <Input  disabled={close}  placeholder='0不展示 1推荐显示'/>
                    </Form.Item>
                    <Form.Item
                        label="技能名称"
                        name="caption"
                        rules={[{ required: true, message: '请输入技能名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="技能类型"
                        name="owner"
                        rules={[{ required: !close, message: '请输入技能类型!' }]}

                    >
                        <Select
                            disabled={close}
                            showSearch
                            placeholder='请选择技能类型'
                        // style={{ marginLeft:10}}
                        // placeholder=""
                            defaultValue={close?0:record?record.owner:''}
                        >
                            {parentCate.map(item => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item name="icon" label="图标">
                        <Upload {...propsFile} maxCount={1}>
                            <Button  icon={<UploadOutlined />}>上传图标</Button>
                        </Upload>
                    </Form.Item>


                        <ProFormUploadButton
                            max={1} tooltip="底部背景" width="md" name="upload" label="底部背景"
                            placeholder="底部背景"
                            fieldProps={{
                                name: 'file',
                                beforeUpload: async (file) => {
                                    this.setState({loading: true})
                                    bgImg({file: file, type: 'image'}).then(r => {
                                        if (r.code === 200)
                                            this.setState({loading: false})
                                    })


                                    return false
                                }
                            }}
                        />

                    <Form.Item
                        label="备注"
                        name="remarks"
                    // rules={[{ required: true, message: '请输入标签名称!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>

                        <Button type="success" htmlType="reset" >
                            重置
                        </Button>
                        <Button loading={loading} style={{ marginLeft: 30 }} type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const mapState = state => ({
    ...state.label

});

const mapDispatch = dispatch => ({
    ...dispatch.label
})

export default connect(mapState, mapDispatch)(AddLabel);